//------------------------------------
    #LINK BUTTON
//------------------------------------

.l-btn
  position: relative
  +inline-block()
  padding: 8px 12px
  border: 1px solid transparent
  background-image: none
  cursor: pointer
  font-size: 12px
  +border-radius(2px)
  white-space: nowrap
  &:hover,
  &:active,
  &:focus
    color: darken(#fff, 10%)
    +box-shadow(0 1px 6px 0 rgba(0,0,0,.20), 0 1px 6px 0 rgba(0,0,0,.20))

.theme-default
  & .l-btn
    color: #fff

.theme-material
  & .l-btn-default
    color: #666
  & .l-btn-primary,
  & .l-btn-info,
  & .l-btn-success,
  & .l-btn-warning,
  & .l-btn-danger
    color: #fff

.l-btn-disabled
  +opacity(0.2)
  cursor: not-allowed
  &:focus,
  &:hover
    +box-shadow(none)

.l-btn-disabled .l-btn-text,
.l-btn-disabled .l-btn-icon
  background-color: transparent

.l-btn-plain-disabled
  +opacity(0.2)
  background-color: transparent
  cursor: not-allowed
  &:focus,
  &:hover
    +box-shadow(none)

.l-btn-icon-left
  display: inline-block
  text-align: left
  & .l-btn-text
    float: right
  & .l-btn-icon
    margin-right: 15px

.l-btn-icon-right
  text-align: right
  & .l-btn-text
    float: left
  & .l-btn-icon
    margin-left: 15px

.l-btn-icon-top
  display: table
  width: 100%
  height: 100%
  text-align: center
  & .l-btn-text
    display: table-footer-group
  & .l-btn-icon
    display: table-cell
    padding-top: 5px
    padding-bottom: 5px

.l-btn-icon-bottom
  display: table
  width: 100%
  height: 100%
  text-align: center
  & .l-btn-text
    display: table-cell
    padding-top: 5px
    padding-bottom: 5px
  & .l-btn-icon
    display: table-footer-group

.l-btn-large
  & .l-btn-icon-top
    & .l-btn-icon
      padding-left: 10px
  & .l-btn-text
    font-size: 18px
